<template>
<div sz1 style="line-height:2em;">
	<Tabs v-model="tag" size="small">
		<!-- <TabPane name="aboutus" label="关于我们">
			<div v-html="aboutUs.content"></div>
			<div text-center>
				<p v-for="(item, index) in aboutUs.pictures" :key="index" mgt2>
					<img :src="item" full-max/>
				</p>
			</div>
		</TabPane> -->
		<TabPane name="companyprofile" label="公司介绍">
			<div v-if="tag=='companyprofile'">
				<div v-html="companyProfile.content"></div>
				<div text-center>
					<p v-for="(item, index) in companyProfile.pictures" :key="index" mgt2>
						<img :src="item" full-max/>
					</p>
				</div>
			</div>
		</TabPane>
		<TabPane name="corporateculture" label="企业文化">
			<div v-if="tag=='corporateculture'">
				<div v-html="corporateCulture.content"></div>
				<div text-center>
					<p v-for="(item, index) in corporateCulture.pictures" :key="index" mgt2>
						<img :src="item" full-max/>
					</p>
				</div>
			</div>
		</TabPane>
		<TabPane name="honor" label="荣誉资质">
			<div v-if="tag=='honor'">
				<div v-html="honor.content"></div>
			</div>
		</TabPane>
	</Tabs>
	<div v-if="page.totalCount">
		<Row :gutter="10">
			<Col v-for="(item, index) in currentPagePictures" :key="index" :xs=12 :sm=8 :md=6 mgt2>
				<background-image class="easyshow" :value=item style="height:160px;" long bd-gray4>
					<div class="easyshow-content" full core white style="background-color:rgba(0, 150, 255, .5);cursor:pointer;" @click="viewPicture(item)">
						<Icon type="md-search" style="font-size:40px;" />
					</div>
				</background-image>
			</Col>
		</Row>
		<AutoPage :value=page :showSizer=false :showAlways=false text-right></AutoPage>
	</div>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import BackgroundImage from '@common/components/background-image'
import AutoPage from '@common/components/AutoPage';
import Page from '@common/models/Page'

@Component({
	components: { BackgroundImage, AutoPage }
})
export default class About extends AbpBase{
	tag = ''
	page = new Page([]).pageSize(16)
	get currentPagePictures() {
		return this.page.items;
	}
	getPictures() {
		var temp = [];
		switch(this.tag) {
			case 'companyprofile': temp = this.companyProfile.pictures; break;
			case 'corporateculture': temp = this.corporateCulture.pictures; break;
			case 'honor': temp = this.honor.pictures; break;
		}
		return temp || [];
	}
	get aboutUs() {
		return this.$store.state.websiteInfo.aboutUs;
	}
	get companyProfile() {
		return this.$store.state.websiteInfo.companyProfile;
	}
	get corporateCulture() {
		return this.$store.state.websiteInfo.corporateCulture;
	}
	get honor() {
		return this.$store.state.websiteInfo.honor;
	}
	async getData() {
		await this.$store.dispatch('websiteInfo/getAboutUs');
		await this.$store.dispatch('websiteInfo/getCompanyProfile');
		await this.$store.dispatch('websiteInfo/getCorporateCulture');
		await this.$store.dispatch('websiteInfo/getHonor');
	}
	async created() {
		this.tag = this.$route.params.tag || 'companyprofile';
		await this.getData();
	}
	@Watch('tag')
	handleOnTagChange() {
		this.page.dataSource(this.getPictures().slice().reverse());
		this.page.getData();
	}
}
</script>
